<template>
  <view class="ver-layout">
    <!--  班级信息  -->
    <view class="create-box ver-layout">
      <view class="create-title">班级信息</view>
      <view class="hor-layout-side-center create-item">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_course_name"/>
          <view class="create-item-title">班级名称</view>
        </view>
        <view class="create-item-select-text">{{ classObj.class_name }}</view>
      </view>
      <view class="hor-layout-side-center create-item">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_major_type"/>
          <span class="create-item-title">专业类别</span>
        </view>
        <view class="create-item-select-text">{{ classObj.major }}</view>
      </view>
      <view class="hor-layout-side-center create-item">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_course_type"/>
          <span class="create-item-title">课程类别</span>
        </view>
        <view class="create-item-select-text">{{ classObj.course }}</view>
      </view>
      <view class="hor-layout-side-center create-item">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_teacher"/>
          <view class="create-item-title">代课教师</view>
        </view>
        <view class="create-item-select-text">{{ classObj.teacher }}</view>
      </view>
      <view class="hor-layout-side-center create-item">
        <view class="hor-layout-center">
          <image class="create-item-logo" :src="classImg.ic_class_time"/>
          <view class="create-item-title">开课时间</view>
        </view>
        <view class="create-item-select-text">{{ classObj.start_time }}</view>
      </view>
    </view>
    <!--  学员信息  -->
    <view class="create-box student ver-layout">
      <view class="student-info-title">填写学员信息</view>
      <view class="create-student-item hor-layout-center" @click="uploadImage">
        <view class="upload-photo ver-layout-center-all">
          <u-icon v-if="!form.image" name="camera" color="#999999" size="50"></u-icon>
          <image v-else :src="form.image" class="photo-image"/>
        </view>
        <view class="upload-photo-text">上传照片</view>
      </view>
      <u-form :model="form" ref="uForm" class="create-student-form" label-width="107px" :label-style="formLabel">
        <u-form-item label="姓 名">
          <u-input v-model="form.realname" placeholder="请输入学生姓名" :maxlength="10"/>
        </u-form-item>
        <u-form-item label="身份证号">
          <u-input v-model="form.id_card" type="idcard" placeholder="请输入身份证号" :maxlength="18"/>
        </u-form-item>
        <u-form-item label="联系人">
          <view class="form-select-item hor-layout-center" @click="form.showContact=true">
            <view class="form-select-text single-line">{{
                form.mainContactObj.label ? form.mainContactObj.label : '请选择'
              }}
            </view>
            <u-icon name="arrow-right" color="#000000"></u-icon>
          </view>
          <u-select v-model="form.showContact" :list="contactList" title="选择联系人"
                    :default-value="form.mainContactObj.value" @confirm="confirmSelectContact"></u-select>
        </u-form-item>
        <u-form-item label="联系电话">
          <u-input v-model="form.phone" type="number" placeholder="请输入联系电话" :maxlength="11"/>
        </u-form-item>
        <u-form-item label="来源渠道">
          <view class="form-select-item hor-layout-center" @click="form.showChannel=true">
            <view class="form-select-text">{{ form.channelObj.label ? form.channelObj.label : '请选择' }}</view>
            <u-icon name="arrow-right" color="#000000"></u-icon>
          </view>
          <u-select v-model="form.showChannel" :list="channelList" title="选择来源渠道"
                    :default-value="form.channelObj.value" @confirm="confirmSelectChannel"></u-select>
        </u-form-item>
        <u-form-item label="所在学校">
          <u-input v-model="form.school" placeholder="请输入当前所在学校" :maxlength="20"/>
        </u-form-item>
        <u-form-item label="家庭住址">
          <u-input v-model="form.home_address" placeholder="请输入家庭住址" :maxlength="30"/>
        </u-form-item>
      </u-form>
    </view>
    <view class="save-layout">
      <view class="save-btn" @click="saveClassStuInfo">保存</view>
    </view>
  </view>
</template>

<script>
import {home, selectTeacher, inputClassStu} from "@/router.js"
import {InputClassStudentApi} from "@/api/enterStudent.js"
import uploadFile from '@/common/ossutil/uploadFile.js'

let ic_class_course_name = require("@/static/home/ic_class_course_name.png")
    , ic_class_course_type = require("@/static/home/ic_class_course_type.png")
    , ic_class_major_type = require("@/static/home/ic_class_major_type.png")
    , ic_class_teacher = require("@/static/home/ic_class_teacher.png")
    , ic_class_time = require("@/static/home/ic_class_time.png"),
    engine = new InputClassStudentApi()
export default {
  name: "editStuInfo",
  data() {
    return {
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      formLabel: {
        color: "#282828",
        fontSize: '15px',
        textAlign: 'justify',
        textAlignLast: 'justify',
        display: 'inline-block',
        paddingRight: '27px'
      },
      classImg: {
        ic_class_course_name, ic_class_course_type, ic_class_major_type, ic_class_teacher, ic_class_time
      },
      classObj: {
        name: '',
        major: '',
        course: '',
        teacher: '',
        time: '',
      },
      form: {
        room_id: '',
        image: '',//图片路径
        avatar: '',
        realname: '',
        id_card: '',
        main_name: '',
        mainContactObj: {value: undefined, label: ''},
        phone: '',
        courseObj: {value: undefined, label: ''},
        course: '',
        teacherObj: '',
        teacher: '',
        classDateObj: {value: undefined, label: ''},
        class_date: '',
        channelObj: {value: undefined, label: ''},
        channel_id: '',
        time_id: '',
        class_num: '',
        free_class_num: '',
        course_consultant: '',
        school: '',
        gift: '',
        home_address: '',
        showChannel: false,
        showContact: false,
        showCourse: false,
        showClassDate: false,
        showGift: false
      },
      channelList: [],
      contactList: [],
      studyTimes: []
    }
  },
  onLoad(options) {
    this.classObj = options
    this.form.room_id = options.class_id
    this.form.course = options.course_sku_id
    this.form.class_date = options.start_time
    this.getChannelList()
    this.getContactList()
    this.getStudyTimes()
  },
  methods: {
    uploadImage() {
      uni.chooseImage({count: 1}).then(res => {
        let path = res[1].tempFilePaths[0],
            file = res[1].tempFiles[0]
        uploadFile(path, file, (f_name, r_path) => {
          console.log("uploadFile", f_name, r_path)
          this.form.image = r_path
          this.saveImg(f_name)
        }, (err) => {
          console.error("uploadFile", err)
        })
      })
    },
    saveImg(path) {
      engine.saveResource(path).then(res => {
        this.form.avatar = res.data[0];
      }).catch(err => this.$u.toast(err.message))
    },
    getChannelList() {
      engine.getChannelList().then(res => {
        this.channelList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    getContactList() {
      engine.getAppellations().then(res => {
        this.contactList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    getStudyTimes() {
      engine.getStudyTimes().then(res => {
        this.studyTimes = res.data
      })
    },
    navToSelectTeacher() {
      this.$u.route({url: selectTeacher, params: {from: inputClassStu}})
    },
    confirmSelectTeacher(object) {
      this.form.teacherObj = object
      this.form.teacher = object.id
    },
    confirmSelectChannel(e) {
      console.log("confirmSelectContact", e)
      let channelIndex = this.channelList.findIndex(item => item.value === e[0].value)
      this.form.channelObj.value = [channelIndex]
      this.form.channelObj.label = e[0].label
      this.form.channel_id = e[0].value
    },
    confirmSelectContact(e) {
      console.log("confirmSelectContact", e)
      let contactIndex = this.contactList.findIndex(item => item.value === e[0].value)
      this.form.mainContactObj.value = [contactIndex]
      this.form.mainContactObj.label = e[0].label
      this.form.main_name = e[0].value
    },
    selectTime(e) {
      this.form.class_date = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.form.class_date += e.year;
      if (month) this.form.class_date += '-' + e.month;
      if (day) this.form.class_date += '-' + e.day;
      if (hour) this.form.class_date += ' ' + e.hour;
      if (minute) this.form.class_date += ':' + e.minute;
      if (second) this.form.class_date += ':' + e.second;
    },
    saveClassStuInfo() {
      engine.registerStudent(this.form).then(res => {
        if (res.code !== 200) {
          this.$u.toast(res.message)
        } else {
          this.$u.toast("报名成功！")
          this.$u.routeDelay({type: 'switchTab', url: home})
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.create-box {
  margin: 18px 12px;
  padding: 0px 13px;
  padding-bottom: 10px;
  background: #FFFFFF;
  border-radius: 6px;
}

.create-title {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  color: #999999;
}

.create-item {
  height: 45px;
}

.create-item-logo {
  width: 18px;
  height: 18px;
}

.create-item-title {
  font-size: 14px;
  color: #333333;
  margin-left: 12px;
  margin-right: 27px;
}

.create-item-select-text {
  font-size: 15px;
  color: #999999;
  margin-right: 3px;
}

.save-layout {
  z-index: 1000;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: white;
  border-top: 1px solid #F2F2F2;
}

.save-btn {
  margin: 10px auto;
  height: 36px;
  line-height: 36px;
  width: 70%;
  text-align: center;
  background: #42B4AB;
  border-radius: 18px;
  /* 文本样式 */
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
}

.create-box.student {
  margin: 0px 12px;
  margin-bottom: 70px;
  padding: 0px;
}

.student-info-title {
  padding-left: 12px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #42B4AB;
  border-bottom: 1px solid #E5E5E5;
}

.create-student-item {
  margin-left: 12px;
  margin-top: 18px;
}

.upload-photo {
  width: 59px;
  height: 73px;
  background: #ECECEC;
}

.photo-image {
  width: 100%;
  height: 100%;
}

.upload-photo-text {
  margin-left: 25px;
  font-size: 15px;
  color: #333333;
  font-family: Source Han Sans CN;
}

.form-select-item {
  width: 100%;
}

.form-select-text {
  flex: 1;
  width: 0;
  margin-right: 3px;
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.create-student-form {
  margin: 12px;
}
</style>
